<template>
  <view class="form" style="padding-top: 0">
    <view class="companyImage">
      <view class="companyImage_box">
        <view class="companyImage_box_bg">
          <view class="companyImage_box_bg_image" v-on:click="onChooseImage()">
            <view class="companyImage_box_bg_image_bg">
              <i class="iconfont icon icon-xiangji1fill" v-if="!licenseSrc"></i>
              <image v-else :src="licenseSrc" mode="heightFix"/>
            </view>
          </view>
          <view class="companyImage_box_bg_font">多合一营业执照</view>
        </view>
      </view>
      <view class="companyImage_font">营业执照的所有信息均清晰可见</view>
    </view>
    <!--      企业名称-->
    <view class="form_li">
      <view class="form_li_label"><font>*</font>企业名称</view>
      <view class="form_li_value">
        <input v-model="company.companyName" placeholder="请输入企业名称">
      </view>
    </view>
    <!--      服务组织类型-->
    <view class="form_li picker">
      <view class="form_li_label"><font>*</font>公司类型</view>
      <view class="form_li_value">
        <picker v-model="company.companyType" :value="index" @change="pickerValue"
                :range="dicData.serviceOrganizationType" range-key="label">
          <view class="form_li_value_picker_content">
            <font v-if="company.companyType" class="form_li_value_picker_value">
              {{ getDataLabelById("dicData.serviceOrganizationType", company.companyType) }}</font>
            <font v-else class="form_li_value_picker_empty">请选择公司类型</font>
          </view>
        </picker>
      </view>
    </view>
    <!--      统一社会信用代码-->
    <view class="form_li">
      <view class="form_li_label"><font>*</font>统一社会信用代码</view>
      <view class="form_li_value">
        <input v-model="company.companyNo" placeholder="请输入统一社会信用代码">
      </view>
    </view>
    <!--      印章号-->
    <view class="form_li">
      <view class="form_li_label"><font>*</font>印章号</view>
      <view class="form_li_value">
        <input v-model="company.sealNo" placeholder="请输入印章号">
      </view>
    </view>
    <!--      法定代表人姓名-->
    <view class="form_li">
      <view class="form_li_label"><font>*</font>法定代表人姓名</view>
      <view class="form_li_value">
        <input v-model="company.legalName" placeholder="请输入法定代表人姓名">
      </view>
    </view>
    <!--      法人手机号-->
    <view class="form_li">
      <view class="form_li_label"><font>*</font>法人手机号</view>
      <view class="form_li_value">
        <input v-model="company.legalTel" placeholder="请输入手机号" type="number">
      </view>
    </view>
    <view class="footerBtn" v-if="company">
      <view class="footerBtn_center">
        <button type="primary" class="footerBtn_center_btn" v-on:click="onSubmit" v-if="company.status !== 2">完成</button>
        <button type="primary" class="footerBtn_center_btn" disabled  v-else>审核中</button>
      </view>
    </view>
  </view>
</template>
<script>

export default {
  components: {},
  data() {
    return {
      company: {
        companyType: null,
        companyName: null,
        companyNo: null,
        sealNo: null,
        legalName: null,
        legalTel: null,
      },
      index:null,
      license: null,
      licenseSrc: null
    }
  },
  methods: {

    /**
     * 页面加载
     **/
    async afterLoad(e) {
      await this.getDictionaryList([
        "serviceOrganizationType",
      ])
      this.getCompanyDetail()
    },
    /**
     *下拉选
     */
    pickerValue(e) {
      let self = this
      self.company.companyType = self.dicData.serviceOrganizationType[e.detail.value].id
    },
    /**
     *提交
     */
    onSubmit() {
      let self = this
      if (!self.license && !self.company.id) {
        uni.showToast({
          title: '请上传营业执照',
          icon: 'none'
        })
        return
      }
      if (!self.company.companyType) {
        uni.showToast({
          title: '请选择公司类型',
          icon: 'none'
        })
        return
      }
      if (!self.company.companyName) {
        uni.showToast({
          title: '请输入企业名称',
          icon: 'none'
        })
        return
      }
      if (!self.company.companyNo) {
        uni.showToast({
          title: '请输入统一社会信用代码',
          icon: 'none'
        })
        return
      }
      if (!self.company.sealNo) {
        uni.showToast({
          title: '请输入印章号',
          icon: 'none'
        })
        return
      }
      if (!self.company.legalName) {
        uni.showToast({
          title: '请输入法定代表人姓名',
          icon: 'none'
        })
        return
      }
      if (!self.company.legalTel) {
        uni.showToast({
          title: '请输入法人手机号',
          icon: 'none'
        })
        return
      }
      if (!self.$utils.checkPhone(self.company.legalTel)) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return
      }

      self.$api.companyAuth({
        files: self.license ? [self.license] : [{name: 'file', uri: "xxx"}],
        formData: self.company
      }, {
        loading: true
      }).then(async(res) => {
        uni.showToast({
          title: '操作成功',
        })
        uni.hideLoading();
        await self.refreshUserInfo()
        self.navigateBackAndLoad()
      }).catch(e => {
        uni.showToast({
          title: '操作失败',
        })
        uni.hideLoading();
      })
    },

    /**
     * 选择图片
     */
    onChooseImage() {
      let self = this;
      uni.chooseImage({
        count: 1,
        success: function (res) {
          self.license = {
            name: "license",
            uri: res.tempFilePaths[0]
          }
          self.licenseSrc = res.tempFilePaths[0]
        },
      })
    },

    /**
     * 查询企业信息
     */
    getCompanyDetail () {
      let self = this
      self.$api.getCompanyDetail().then(res => {
        self.licenseSrc = res.data.license
        self.company = res.data
      })
    }
  }
}
</script>
<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
@import "../../static/css/form.scss";

.companyImage {
  width: 100%;
  height: 270px;
  background-color: $bg-page;
  padding: 5px 0;

  .companyImage_font {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: $font-hc;
    margin-bottom: 10px;
    height: 20px;
    margin-top: 5px;
  }

  .companyImage_box {
    width: 100%;
    height: calc(90% - 20px);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;

    .companyImage_box_bg {
      width: 80%;
      height: 100%;
      background-color: #69affd;
      border-radius: 5px;

      .companyImage_box_bg_image {
        height: calc(100% - 30px);
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .companyImage_box_bg_image_bg {
          width: 80%;
          height: 85%;
          background-color: #f3f3f3;
          border-radius: 5px;
          display: flex;
          justify-content: center;
          align-items: center;

          i {
            font-size: 40px;
            color: $font-hc;
          }

          image {
            width: 0;
            height: 100%;
            border-radius: 5px;
          }
        }


      }

      .companyImage_box_bg_font {
        display: flex;
        height: 20px;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #fff;
        margin: 5px 0;
      }
    }
  }

}
</style>
